<template>
  <div id="myChart5" style="width: 350px; height: 300px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null, // 用于保存图表的实例
      option: {
        grid: {
          // height: "100px", // 通常不需要设置grid的高度，除非有特殊需求
          left: "3%", // 控制网格离容器左侧的距离
          right: "4%",
          containLabel: true, // 确保标签在grid内
        },
        xAxis: {
          type: "value", // 横向柱状图时，X轴通常为数值轴
          axisLine: {
            show: false, // 隐藏 X 轴的线条
          },
          axisTick: {
            show: false, // 隐藏 X 轴的刻度线
          },
          splitLine: {
            show: false, // 隐藏 X 轴的分割线
          },
          axisLabel: {
            show: false, // 隐藏X轴的标签
          },
        },
        yAxis: {
          type: "category", // 横向柱状图时，Y轴通常为类别轴
          data: ["工种1", "工种2", "工种3"],
          axisLine: {
            show: false, // 隐藏 Y 轴的线条
          },
          axisTick: {
            show: false, // 隐藏 Y 轴的刻度线
          },
          axisLabel: {
            show: true, // 显示 Y 轴的标签
            rotate: 0, // 旋转角度，横向时通常不需要旋转
          },
        },
        series: [
          {
            data: [40, 83, 34],
            type: "bar",
            // barWidth 和 barGap 需要根据具体效果调整
            barWidth: "40%", // 柱子宽度
            barGap: "40%", // 同一类柱子之间的间距
            // barCategoryGap 不再需要，因为它是针对类别之间的间距
            itemStyle: {
              barBorderRadius: 15, // 柱子边框圆角
              color: "#1818db", // 柱子颜色
            },
            label: {
              show: true, // 显示标签
              position: "right", // 横向柱状图的标签位置
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.chart = echarts.init(document.getElementById("myChart5"));
    this.chart.setOption(this.option);
  },
  // ... 其他选项，如methods, computed等
};
</script>

<style lang="scss">
/* 样式代码 */
</style>
